<template>
  <el-container style="height:100%"
                class="container-class">
    <el-header></el-header>
    <el-main>
      <el-row>
        <el-col :span="2">
          <p></p>
        </el-col>
        <el-col :span="20">
          <!--          <div class="puzzle-box">-->
          <!--            <PuzzleVerification v-model="isVerificationShow"-->
          <!--                                :puzzleImgList="puzzleImgList"-->
          <!--                                :height="150"-->
          <!--                                :width="300"-->
          <!--                                :blockSize="30"-->
          <!--                                :deviation="4"-->
          <!--                                blockType="puzzle"-->
          <!--                                :onSuccess="handleSuccess" />-->
          <!--          </div>-->
          <div class="dowebok"
               id="dowebok">
            <div class="form-container sign-up-container">
              <el-form ref="loginForm" :model="loginForm" :rules="rules">
                <h1>注册</h1>
                <el-form-item prop="nickname">
                  <el-input type="text" placeholder="昵称" v-model="loginForm.nickname"></el-input>
                </el-form-item>
                <el-form-item prop="username">
                  <el-input type="text" placeholder="账号" v-model="loginForm.username"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input type="password" placeholder="密码" v-model="loginForm.password"></el-input>
                </el-form-item>
                <el-button type="primary" @click="handleRegistered">注册</el-button>
              </el-form>
            </div>
            <div class="form-container sign-in-container">
              <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left">
                <div class="title-container">
                  <h3 class="title">登录</h3>
                </div>
                <el-form-item prop="username">
                  <span class="svg-container">
                    <svg-icon icon-class="user" />
                  </span>
                  <el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text" tabindex="1" auto-complete="on"/></el-form-item>
                <el-form-item prop="password">
                <span class="svg-container"><svg-icon icon-class="password" />
                </span>
                  <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="Password"
                            name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin"/><span class="show-pwd" @click="showPwd">
                <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'"/>
              </span>
                </el-form-item>

                <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">登录</el-button>
              </el-form>
            </div>
            <div class="overlay-container">
              <div class="overlay">
                <div class="overlay-panel overlay-left">
                  <h1>已有帐号？</h1>
                  <p>请使用您的帐号进行登录</p>
                  <button class="ghost"
                          id="signIn"
                          @click="onSignIn">登录</button>
                </div>
                <div class="overlay-panel overlay-right">
                  <h1>没有帐号？</h1>
                  <p>立即注册加入我们，和我们一起开始旅程吧</p>
                  <button class="ghost"
                          id="signUp"
                          @click="onSignUp">注册</button>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="2">
          <p></p>
        </el-col>

      </el-row>
    </el-main>
    <el-footer style="height:auto">
      <footer-bar></footer-bar>
    </el-footer>
  </el-container>

</template>

<script>
import FooterBar from '@/components/FooterBar.vue'
import PuzzleVerification from 'vue-puzzle-verification'
import api from '../api/user'
import router from "@/router";
import axios from "axios";

export default {
  name: 'Login',
  components: {
    FooterBar,
    PuzzleVerification
  },
  data: function () {
    return {
      isVerificationShow: false,
      puzzleImgList: [
        require('../assets/img/puzzle_verification.jpg')
      ],
      loginForm: {
        username: 'otto1221',
        password: '111111'
      },
      loading:false,
      passwordType:'password',
      rules: {
        nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    onSignIn: function () {
      let container = document.getElementById('dowebok')
      container.classList.remove('right-panel-active')
    },
    onSignUp: function () {
      let container = document.getElementById('dowebok')
      container.classList.add('right-panel-active')
    },
    // handleSuccess () {
    //   alert('验证成功了')
    //   this.isVerificationShow = false
    //   this.$nextTick(() => {
    //     this.$router.push({
    //       path:'/'
    //     });
    //     console.log(this.isVerificationShow);
    //   });
    // },

    handleSubmit(event) {
      event.preventDefault(); // 阻止表单默认提交行为
      this.handleLogin();
    },
    async handleRegistered() {
      debugger
      // 验证表单数据
      this.$refs.loginForm.validate(valid => {
        if (!valid) {
          console.log('error submit!!');
          return false;
        }

        // 设置加载状态
        this.loading = true;
        // 发送 POST 请求进行用户注册
        axios.post('http://localhost:9528/dev-api/admin/front/user/registered', this.loginForm)
          .then(response => {
            console.log('注册成功:', response);

            // 调用 Vuex 的 user/login 方法登录
            this.$store.dispatch('user/login', this.loginForm)
              .then(() => {
                // 登录成功后跳转到指定页面
                this.$router.push({ path: this.redirect || '/' });

                // 设置加载状态
                this.loading = false;

                // 提示成功信息
                console.success('注册并登录成功');
              })
              .catch(error => {
                // 登录失败
                console.error('登录失败:', error);
                this.loading = false;
                console.error('登录失败');
              });
          })
          .catch(error => {
            // 注册失败
            console.error('注册失败:', error);
            this.loading = false;
            ElMessage.error('注册失败');
          });
      });
    }
    ,
    handleLogin() {
      debugger
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm).then(response => {
            this.$router.push({ path: this.redirect || '/' })
            this.loading = false
          }).catch(() => {
            this.loading = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    fetchData() {

    }
  },

}
</script>

<style scoped>
* {
  box-sizing: border-box;
}

body {
  font-family: "Montserrat", sans-serif;
  /* background: #f6f5f7; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: -20px 0 50px;
}
.puzzle-box {
  position: absolute;
  top: 0px;
  right: 560px;
  z-index: 999;
  box-shadow: 0 0 5px 1px rgba(158, 179, 193, 0.5);
  border-radius: 20px;
  /* bottom: 0;
       left: 0; */
}
.container-class {
  background-image: url("../assets/img/login_bg.jpg");
  background-size: cover;
}

h1 {
  font-weight: bold;
  margin: 0;
}

p {
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.5px;
  margin: 20px 0 30px;
}

span {
  font-size: 12px;
}

a {
  color: #333;
  font-size: 14px;
  text-decoration: none;
  margin: 15px 0;
}

.dowebok {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
  position: relative;
  overflow: hidden;
  width: 768px;
  max-width: 100%;
  min-height: 480px;
  float: right;
}

.form-container form {
  background: #fff;
  display: flex;
  flex-direction: column;
  padding: 0 50px;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.social-container {
  margin: 20px 0;
}

.social-container a {
  border: 1px solid #ddd;
  border-radius: 50%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  height: 40px;
  width: 40px;
}

.social-container a:hover {
  background-color: #eee;
}

.form-container input {
  background: #eee;
  border: none;
  padding: 12px 15px;
  margin: 8px 0;
  width: 100%;
  outline: none;
}

button {
  border-radius: 20px;
  border: 1px solid #409eff;
  background: #409eff;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 12px 45px;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
  cursor: pointer;
}

button:active {
  transform: scale(0.95);
}

button:focus {
  outline: none;
}

button.ghost {
  background: transparent;
  border-color: #fff;
}

.form-container {
  position: absolute;
  top: 0;
  height: 100%;
  transition: all 0.6s ease-in-out;
}

.sign-in-container {
  left: 0;
  width: 50%;
  z-index: 2;
}

.sign-up-container {
  left: 0;
  width: 50%;
  z-index: 1;
  opacity: 0;
}

.overlay-container {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  overflow: hidden;
  transition: transform 0.6s ease-in-out;
  z-index: 100;
}

.overlay {
  background: #409eff;
  background: linear-gradient(to right, #409eff, #ff0000) no-repeat 0 0 / cover;
  color: #fff;
  position: relative;
  left: -100%;
  height: 100%;
  width: 200%;
  transform: translateY(0);
  transition: transform 0.6s ease-in-out;
}

.overlay-panel {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 40px;
  height: 100%;
  width: 50%;
  text-align: center;
  transform: translateY(0);
  transition: transform 0.6s ease-in-out;
}

.overlay-right {
  right: 0;
  transform: translateY(0);
}

.overlay-left {
  transform: translateY(-20%);
}

/* Move signin to right */
.dowebok.right-panel-active .sign-in-container {
  transform: translateY(100%);
}

/* Move overlay to left */
.dowebok.right-panel-active .overlay-container {
  transform: translateX(-100%);
}

/* Bring signup over signin */
.dowebok.right-panel-active .sign-up-container {
  transform: translateX(100%);
  opacity: 1;
  z-index: 5;
}

/* Move overlay back to right */
.dowebok.right-panel-active .overlay {
  transform: translateX(50%);
}

/* Bring back the text to center */
.dowebok.right-panel-active .overlay-left {
  transform: translateY(0);
}

/* Same effect for right */
.dowebok.right-panel-active .overlay-right {
  transform: translateY(20%);
}
</style>
